<template>
  <view v-if="showTabBar" class="tab-bar" :style="{ height: (GM_STATUS_BAR_HEIGHT + 60 + 28) + 'rpx' }">
    <view v-for="(item, index) in tabbarList" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
      <!-- 优先使用 FontIcon -->
      <FontIcon 
        v-if="item.iconName" 
        :name="item.iconName" 
        :size="iconSize / 2"
        :color="selected === index ? selectedColor : color"
        class="tab-bar-icon-font"
      />
      <!-- 其次使用图片图标 -->
      <image 
        v-else-if="item.iconPath" 
        :src="selected === index ? item.selectedIconPath : item.iconPath" 
        class="tab-bar-icon"
        mode="aspectFit"
      ></image>
      <!-- 兜底使用u-icon -->
      <u-icon 
        v-else 
        :name="getTabIcon(index)" 
        :color="selected === index ? selectedColor : color" 
        size="27"
      ></u-icon>
      <text 
        class="tab-bar-text" 
        :class="selected === index ? 'selected' : ''"
        :style="selected === index ? { color: selectedColor } : {}"
      >{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/store';
import { ROLE_TYPE } from '@/config/app';
import { merchantTabBar } from '@/config/tabBarConfig';
import FontIcon from '@/components/FontIcon.vue';

// 定义图标映射表
const iconMap = {
  0: 'home',
  1: 'category',
  2: 'message',
  3: 'user'
};

export default {
  name: 'GlobalTabBar', // 修正组件名称
  components: {
    FontIcon
  },
  data() {
    return {
      GM_STATUS_BAR_HEIGHT: uni.getStorageSync('GM_STATUS_BAR_HEIGHT'),
      selected: 0,
      color: '#7A7E83',
      selectedColor: '#007AFF',
      tabbarList: [],
      showTabBar: true,
      userStore: null,
      unwatch: null,
      prevPath: '',
      iconSize: 86, // rpx，微信官方标准：40px = 80rpx（图标显示尺寸），增加 6rpx
      businessType: 1 // 商家类型，用于动态设置颜色
    }
  },
  created() {
    this.userStore = useUserStore();
    // 确保角色已设置
    if (!this.userStore.role) {
      const savedRole = uni.getStorageSync('userRole');
      if (savedRole) {
        this.userStore.setRole(savedRole);
      } else {
        // 默认设置为商家角色（如果是在商家页面）
        this.userStore.setRole(ROLE_TYPE.MERCHANT);
      }
    }
  },
  mounted() {
    // 获取用户角色和数据
    this.loadTabbarData();

    // 监听页面显示事件
    this.pageShowHandler = () => {
      this.updateSelectedTab();
    };
    uni.$on('pageShow', this.pageShowHandler);

    // 监听页面切换事件
    this.pageSwitchHandler = () => {
      setTimeout(() => {
        this.updateSelectedTab();
      }, 100);
    };

    // 监听路由变化
    this.onRouteChange();

    // 预加载商家端页面以减少切换时的白屏与跳转感
    this.$nextTick(() => {
      if (this.userStore && this.userStore.role === ROLE_TYPE.MERCHANT) {
        this.preloadMerchantPages();
      }
    });
  },
  beforeUnmount() {
    // 清理监听器
    if (this.unwatch) {
      this.unwatch();
    }
    if (this.pageShowHandler) {
      uni.$off('pageShow', this.pageShowHandler);
    }
    if (this.pageSwitchHandler) {
      uni.$off('pageSwitch', this.pageSwitchHandler);
    }
  },
  methods: {
    // 预加载商家端tab页面
    preloadMerchantPages() {
      try {
        (this.tabbarList || []).forEach(item => {
          if (item && item.pagePath) {
            uni.preloadPage({ url: item.pagePath });
          }
        });
      } catch (e) {
        console.warn('预加载商家端页面失败:', e);
      }
    },

    // 监听路由变化
    onRouteChange() {
      // 定期检查当前页面，更新tabbar状态
      this.checkPageTimer = setInterval(() => {
        this.updateSelectedTab();
      }, 300);
    },

    loadTabbarData() {
      try {
        // 确保 userStore 已初始化
        if (!this.userStore) {
          this.userStore = useUserStore();
        }
        
        // 如果角色未设置，尝试从缓存读取
        if (!this.userStore.role) {
          const savedRole = uni.getStorageSync('userRole');
          if (savedRole) {
            this.userStore.setRole(savedRole);
          } else {
            // 默认设置为商家角色（如果是在商家页面）
            this.userStore.setRole(ROLE_TYPE.MERCHANT);
          }
        }
        
        // 根据角色显示不同的tabbar
        // 检查当前页面路径，如果是商家端页面，强制显示 tabbar
        const currentPages = getCurrentPages();
        const currentPath = currentPages && currentPages.length > 0 
          ? `/${currentPages[currentPages.length - 1].route}` 
          : '';
        const isMerchantPage = currentPath.includes('/merchant/') || currentPath.includes('/public/merchant/');
        
        if (this.userStore.role === ROLE_TYPE.MERCHANT || isMerchantPage) {
          // 商家端直接使用配置文件中的数据
          this.tabbarList = merchantTabBar;
          this.showTabBar = true;
          
          // 如果是商家页面但角色未设置，设置角色
          if (isMerchantPage && this.userStore.role !== ROLE_TYPE.MERCHANT) {
            this.userStore.setRole(ROLE_TYPE.MERCHANT);
          }
          
          // 获取商家类型，用于动态设置颜色
          this.getBusinessType();
          console.log('GlobalTabBar - 显示商家端 tabbar, showTabBar:', this.showTabBar, 'tabbarList:', this.tabbarList.length);
        } else {
          // 用户端使用原生tabbar，不显示自定义tabbar
          this.showTabBar = false;
          console.log('GlobalTabBar - 隐藏 tabbar, role:', this.userStore.role);
        }
        // 更新选中状态
        this.updateSelectedTab();
      } catch (error) {
        console.error('加载tabbar数据失败:', error);
        // 出错时也尝试显示商家端tabbar
        this.tabbarList = merchantTabBar;
        this.showTabBar = true;
        this.getBusinessType();
      }
    },
    
    // 获取商家类型
    getBusinessType() {
      try {
        const companyInfo = uni.getStorageSync('companyInfo');
        if (companyInfo && companyInfo.businessType) {
          const bt = Number(companyInfo.businessType);
          this.businessType = Number.isNaN(bt) ? companyInfo.businessType : bt;
          console.log('GlobalTabBar - 从缓存读取到businessType:', this.businessType);
          
          // 根据商家类型设置选中颜色
          this.updateSelectedColor();
        } else {
          console.log('GlobalTabBar - 缓存中未找到companyInfo.businessType，使用默认值:', this.businessType);
          this.updateSelectedColor();
        }
      } catch (error) {
        console.error('GlobalTabBar - 读取companyInfo失败:', error);
        this.updateSelectedColor();
      }
    },
    
    // 根据商家类型更新选中颜色
    updateSelectedColor() {
      // 商家类型颜色映射：
      // businessType === 1: #0081ff (蓝色) - 一类商家
      // businessType === 2: #39B54A (绿色) - 二类商家
      // businessType === 3: #FBBD08 (黄色) - 三类商家
      if (this.businessType === 2) {
        this.selectedColor = '#39B54A'; // 绿色
      } else if (this.businessType === 3) {
        this.selectedColor = '#FBBD08'; // 黄色
      } else {
        this.selectedColor = '#0081ff'; // 蓝色（默认）
      }
      console.log('GlobalTabBar - 商家类型:', this.businessType, '选中颜色:', this.selectedColor);
    },

    // 更新选中的tab
    updateSelectedTab() {
      const currentPages = getCurrentPages();
      if (!currentPages || currentPages.length === 0) return;

      const currentPage = currentPages[currentPages.length - 1];
      const currentPath = `/${currentPage.route}`;

      // 特殊处理：public/merchant/shop 页面应该选中首页
      if (currentPath === '/public/merchant/shop') {
        const homeIndex = this.tabbarList.findIndex(item => item.pagePath === '/pages/merchant/index/index');
        if (homeIndex !== -1 && this.selected !== homeIndex) {
          this.selected = homeIndex;
          this.userStore.setTabIndex(homeIndex);
        }
        return;
      }

      // 查找当前页面在tabbar中的索引
      const index = this.tabbarList.findIndex(item => item.pagePath === currentPath);
      if (index !== -1 && this.selected !== index) {
        this.selected = index;
        this.userStore.setTabIndex(index);
      }
    },

    // 获取tab图标
    getTabIcon(index) {
      return iconMap[index] || 'home';
    },

    // 切换tab - 优化的跳转逻辑
    switchTab(item, index) {
      // 防止重复点击同一tab
      if (this.selected === index) {
        return;
      }

      // 获取当前页面路径
      const currentPages = getCurrentPages();
      if (!currentPages || currentPages.length === 0) return;

      const currentPage = currentPages[currentPages.length - 1];
      const currentPath = `/${currentPage.route}`;

      // 如果点击的是当前页面，不执行跳转
      if (currentPath === item.pagePath) {
        return;
      }

      // 更新选中状态
      this.selected = index;
      this.userStore.setTabIndex(index);

      // 商家端为自定义tabbar页面，使用redirectTo替代reLaunch以获得更平滑的切换
      if (this.userStore.role === ROLE_TYPE.MERCHANT) {
        uni.redirectTo({
          url: item.pagePath,
          success: () => {
            // 已平滑切换
          },
          fail: (err) => {
            console.warn('redirectTo失败，回退到reLaunch:', err);
            uni.reLaunch({ url: item.pagePath });
          }
        });
        return;
      }

      // 非商家端（原生tabbar），尝试使用switchTab
      uni.switchTab({
        url: item.pagePath,
        fail: () => {
          // 兜底：如果不是原生tabBar页面，使用redirectTo
          uni.redirectTo({ url: item.pagePath });
        }
      });
    }
  }
};
</script>

<style scoped>
.tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(40rpx);
  -webkit-backdrop-filter: blur(40rpx);
  border-top: 1px solid rgba(238, 238, 238, 0.5);
  z-index: 1000;
  /* 适配机型：底部使用安全区域，确保不被设备底部遮挡 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 添加过渡效果，减少闪烁感 */
  transition: opacity 0.2s ease-in-out;
}

.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* 按钮内容距离顶部 8rpx，距离底部 20rpx */
  padding-top: 8rpx;
  padding-bottom: 20rpx;
  box-sizing: border-box;
}

.tab-bar-icon {
  width: 27px;
  height: 27px;
}

.tab-bar-icon-font {
  transition: all 0.3s ease;
}

.tab-bar-item .tab-bar-text {
  font-size: 13px;
  color: #7A7E83;
  margin-top: 3px;
}

/* 选中状态的颜色通过动态样式控制（selectedColor），无需额外 CSS 规则 */
</style>